<template>
	<view class="content">
		<div class="title">欢迎登录药品管理系统</div>
		<div class="box">
			<div v-for="(item,index) in data" class="button" @click="jump(item.title)">
				<image class="baseMap" :src="'/static/' + item.value + '.png'"></image>
				<div>{{item.title}}</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'home',
				data: [{
								title:'进货管理',
								value:'stock'
							},{
								title:'供应商管理',
								value:'supplier'
							}]
			}
		},
		onLoad() {
	
	
		},
		methods: {
			jump(item){
				if(item === '进货管理'){
					wx.navigateTo({
						url: '/pages/stock/stock',
					});
				}else if(item === '供应商管理'){
					wx.navigateTo({
						url: '/pages/supplier/supplier?title=' + item
					});
				}
			},
		}
	}
</script>

<style lang="scss">
	.content {
		// background-image:url("https://img.tukuppt.com/ad_preview/00/24/32/5c9a6feb2b02f.jpg!/fw/780");
		// background-repeat: no-repeat;
		// background-position: center 4vh !important;
		height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		// background: rgba(241, 244, 249, 1);
		background: linear-gradient(135deg, #53fddb, #defff7);

		.title{
			font-size: 24px;
			position: absolute;
			top: 15vh;
			left: 5vw;
		}
		.box{
			position: absolute;
			width: 100vw;
			display: flex;
			justify-content: space-evenly;
			.button{
				width: 175px;
				height: 92px;
				opacity: 1;
				border-radius: 6px;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 2px 12px  rgba(0, 109, 204, 0.06);
				image{
					width: 48px;
					height: 48px;
					margin: 22px 8px 22px 12px;
				}
				div{
					width: 107px;
					height: 92px;
					font-size: 16px;
					font-weight: 500;
					letter-spacing: 0px;
					line-height: 92px;
					float: right;
					color: rgba(50, 50, 51, 1);
				}
			}
		}
	}
</style>
